<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ajax使用</title>
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<style>
			body {
				background-color: aliceblue;
			}
			
			#login{
				margin: 5% auto;
				width: 360px;
				background-color: #fff;
				height: 200px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
			.loginInput{
					padding: 8px;
					font-size: 16px
			}
			.loginBtn{
				margin-top: 30px;
				padding: 5px 15px;
				border-radius: 20px;
			}
			#msg {
				margin: 5% auto;
				width: 760px;
				height: 800px;
				background-color: #fff;
				box-shadow: 3px 2px -1px #020202;
				border-radius: 5px;
				display: flex;
				flex-direction: column;
			}
			#msg input{
				padding: 8px;
				font-size: 16px
			}

			h3 {
				margin: 0%;
				padding: 10px 0;
				text-align: center;
				letter-spacing: 10px;
				border-bottom: 1px solid #f2f2f2;
			}
			

			#msgArr {
				flex: 1;
				width: 100%;
				overflow-y: auto;
				padding: 10px 0;
			}

			#msgArr p {
				border-bottom: 1px solid #efefef;
				padding: 10px;
				margin-left: 20px;

			}

			#msgArr span {
				float: right;
				font-size: 10px;
				color: red;
				opacity: 0.7;
			}

			#msgData {
				display: flex;
				align-items: center;
				justify-content: space-between;

			}
		</style>
	</head>
	<body>
		
		<div id="login" >
			<input class="loginInput" type="text" name="name">
			<input class="loginBtn" type="button" value="登入">
		</div>
		
		
		<div id="msg">
			<h3> 留言板 </h5>
			<div id='msgArr'> </div>
			<textarea id="msgText" name="text"></textarea>
			<input id="postMsg" type="button" value="留言">
		</div>


		<script>
			let url = 'http://ab.boatim.top/msg'
			$('#msg').hide()
			
			// 登录事件
			$('.loginBtn').click(function(){
				var val = $('.loginInput').val()
				console.log(111,val)
				if(val){
					$('#login').hide(function(){
						$('#msg').show()
					})
				}else{
					alert('留下姓名')
				}
			})
			
			// POST发送请求，新建一个留言
			$('#postMsg').click(function(e) {
				$.post(url, {name:$('.loginInput').val(), text:$('#msgText').val()}, function(e) {
					//重置表单
					$('#msgText').val('')
					console.log('留言',e)
					$("#msgArr").prepend(`<p id='${e._id}'> <b> ${e.name}</b> : ${e.text}  <span onclick="rmMsg('${e._id}')" >删除</span>	 </p> `);
				})
			})

			//删除留言项目
			function rmMsg(id) {
				console.log(id)
				$.ajax({
					url: `${url}/${id}`, // 请求地址
					type: 'DELETE', // 请求方式
					data:{name:$('.loginInput').val()},  //登录框的值
					success: function(result) { // 成功回调函数
						console.log(result);
						$(`#${id}`).remove()
					},
					error: function(error) { // 失败回调函数
						console.log(error);
							alert('只能删除自己的留言')
					}
				});
				
			}



			// 页面加载 get方法获取数据
			function Msg() {
				$.get(url, '', function(res, err) {
					res.map(item => {
						// console.log('留言项', item)
						$("#msgArr").append(`<p id='${item._id}'> <b> ${item.name}</b> : ${item.text}  <span  onclick="rmMsg('${item._id}')" >删除</span></p> `);
					})
				})
			}


			Msg() //初始化家在请求
		</script>

	</body>
</html>